<template>
  <div>
    <van-nav-bar
      title="首页"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item style="background-color: #ffcb3b"></van-swipe-item>
      <van-swipe-item style="background-color: #fa9c15"></van-swipe-item>
      <van-swipe-item style="background-color: #5fa1dd"></van-swipe-item>
      <van-swipe-item style="background-color: #dcdadb"></van-swipe-item>
    </van-swipe>
    <van-grid :gutter="10" style="margin: 20px 0">
      <van-grid-item
        v-for="value in 8"
        :key="value"
        icon="photo-o"
        text="文字"
      />
    </van-grid>
    <van-grid style="margin: 20px 10px" direction="horizontal" :column-num="3">
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>
    <van-grid style="margin: 20px 10px" direction="horizontal" :column-num="1">
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      swipeList: [],
    };
  },
  mounted() {},
};
</script>

<style>
.my-swipe .van-swipe-item {
  height: 150px;
}
</style>